<template>
  <div class="quotation-approval-page">
    <a-spin :spinning="loading">
      <div class="header">
        <a-button type="primary" @click="addHandle">新增</a-button>
      </div>
      <div class="list">
        <a-row class="list-item" v-for="(item, index) in formState" :key="index" :gutter="16">
          <a-col :span="12">
            <label for="#">单价调整幅度：</label>
            <a-input-number v-model:value="item.minPrice" :min="0" :max="item.maxPrice as number - 0.01" :precision="2" placeholder="请输入">
              <template #addonBefore> > </template>
            </a-input-number>
            <span style="padding: 0 12px">且</span>
            <a-input-number v-model:value="item.maxPrice" :min="item.minPrice ? item.minPrice + 0.01 : 0.01" :max="999.99" :precision="2" placeholder="请输入">
              <template #addonBefore> &lt; </template>
            </a-input-number>
          </a-col>
          <a-col :span="8">
            <label for="#">审批人：</label>
            <a-select v-model:value="item.quotationApprovalId" mode="multiple" :maxTagCount="1" placeholder="请选择">
              <a-select-option v-for="(item, index) in userOpts" :key="index" :value="item.id">{{ item.username }}</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="4">
            <a-button style="margin-right: 8px" @click="submitHandle(item, index)" :loading="loading" v-debounce type="primary">保存</a-button>
            <a-button @click="deleteHandle(item, index)" type="danger">删除</a-button>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>
<script lang="ts">
export default {
  name: "QuotationApproval"
};
</script>
<script lang="ts" setup>
import { onMounted } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";

const { formState, loading, userOpts, init } = InitHook();
const { addHandle, deleteHandle, submitHandle } = OperationHook({
  formState,
  loading,
  init
});
onMounted(() => init());
</script>
<style lang="stylus" scoped>
.quotation-approval-page{
    background-color: #fff;
    padding: 24px;
    .list{
        padding: 24px 0;
        width: 1200px;
        .list-item{
            padding-bottom: 24px;
            :deep(.ant-select){
                width: 80%;
            }
            :deep(.ant-col){
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
            }
        }
    }
}
</style>
